<script setup lang="ts">
import { h, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { NCard,NButton,NFlex ,NDropdown,NIcon} from 'naive-ui'
import SvgIcon from '@/components/SvgIcon.vue'

const router = useRouter()
//接收props
const props = defineProps({
  title: {
    type: String,
    default: '应用的名称' // 默认值
  },
  icon: {
    type: String,
    default: 'shipinhuiyi' // 默认值
  }
})

// emit事件
const emit = defineEmits(['show-mail'])


let menuIcon = (icon: string) => {
  return h(NIcon, { size: 24 }, () => h(SvgIcon, { iconClass: icon }))
}
const options = [
  { 
    label: '预约通话',
    key: '预约通话',
    icon: () => menuIcon('shipinhuiyi1')
  },
  { 
    label: '拨打电话', 
    key: '拨打电话',
    icon: () => menuIcon('shipinhuiyi2')
  },

]
const handleSelect = (key: string) => {
  emit('show-mail',key)
  console.log('点击了哪个事件',key)
}
let renderIcon = () => {
  return  h(NFlex, () => [ h(NDropdown,{trigger:"hover",size:"huge",showArrow:true,options:options,onSelect:handleSelect},()=> h(NButton,{text:true,style:'font-size: 24px'},()=>h(SvgIcon, { iconClass: props.icon}))),h('div',  props.title )])
}
const headerTitel = () => renderIcon()

/**
 * 关闭应用，返回路由上一页
 */
const handleClose = () => {
  console.log('关闭不了这个应用')
  router.go(-1)
}

</script>

<template>
  <n-card :title="headerTitel" style="height: 100%;" closable  @close="handleClose">
     
    <template #header-extra>
      <slot name="header-extra"></slot>

    </template>
    <template #default>
      
      <slot></slot>
      
    </template>
  
    <template #footer>
      <slot name="footer"></slot>
    </template>
   
  </n-card>
</template>

<style scoped>

</style>
